<template>
	<view class="container">
		<!-- 顶部栏 -->
		<view class="top-bar">
			<view class="user-info">Hi Lily</view>
		</view>

		<!-- 车身信息卡片 -->
		<view class="card fh" @click="fh">
			<view>返回</view>
		</view>
		<view class="card body-info">
			<view class="card-title">车身信息</view>
			<view class="card-content1">
				<view class="row1"><text>长宽高</text><text>4800×1705×1490 mm</text></view>
				<view class="row1"><text>前轮距</text><text>1480 mm</text></view>
				<view class="row1"><text>轴距</text><text>2610 mm</text></view>
				<view class="row1"><text>后轮距</text><text>1480 mm</text></view>
				<view class="row1"><text>整备质量</text><text>1200 Kg</text></view>
				<view class="row1"><text>后备厢容积</text><text>478 L</text></view>
			</view>
		</view>

		<!-- 车轮/制动信息卡片 -->
		<view class="card wheel-brake-info">
			<view class="card-title">车轮/制动信息</view>
			<view class="card-content">
				<view class="row"><text>前/后制动器</text><text>鼓式/盘式</text></view>
				<view class="row"><text>驻车制动</text><text>电子驻车</text></view>
				<view class="row"><text>前轮胎规格</text><text>205/50R16</text></view>
				<view class="row"><text>后轮胎规格</text><text>205/50R16</text></view>
			</view>
		</view>

		<!-- 底盘/转向信息卡片 -->
		<view class="card chassis-steering-info">
			<view class="card-title">底盘/转向信息</view>
			<view class="card-content">
				<view class="row"><text>驱动形式</text><text>前驱</text></view>
				<view class="row"><text>前悬挂类型</text><text>多连杆</text></view>
				<view class="row"><text>后悬挂类型</text><text>连杆</text></view>
				<view class="row"><text>转向助力形式</text><text>电子液压</text></view>
			</view>
		</view>

		<!-- 基本信息卡片 -->
		<view class="card basic-info">
			<view class="card-title">基本信息</view>
			<view class="card-content">
				<view class="row"><text>车主姓名</text><text>Lily</text></view>
				<view class="row"><text>车辆品牌</text><text>品牌名字</text></view>
				<view class="row"><text>车架号信息</text><text>车架号信息</text></view>
			</view>
		</view>

		<!-- 电动机信息卡片 -->
		<view class="card motor-info">
			<view class="card-title">电动机信息</view>
			<view class="card-content">
				<view class="row"><text>总功率</text><text>90 Kw</text></view>
				<view class="row"><text>扭矩信息</text><text>扭矩信息</text></view>
			</view>
		</view>

		<!-- 胎压监测卡片 -->
		<view class="card tire-pressure-info">
			<view class="card-title">胎压监测</view>
			<view class="card-content">
				<view class="row"><text>轮胎气压值</text><text>2350kPa</text></view>
			</view>
		</view>

		<!-- 电池信息卡片 -->
		<view class="card battery-info">
			<view class="card-title">电池信息</view>
			<view class="card-content">
				<view class="row"><text>电池容量</text><text>容量信息</text></view>
				<view class="row"><text>电池品牌</text><text>品牌</text></view>
				<view class="row"><text>百公里耗电</text><text>耗电</text></view>
			</view>
		</view>

		<!-- 车辆图片 -->
		<image src="/static/car/car.png" class="car-image" mode="scaleToFill"></image>

		<!-- 里程和电量区 -->
		<view class="mileage-battery">
			<view class="progress">
				<view class="progress-bar" style="width: 89%;"></view>
			</view>
			<view class="mileage-bottom">
				<view class="mileage">965 km</view>
				<view class="range">300 km</view>
			</view>

		</view>

		<!-- 仪表盘 -->

		<!-- 底部导航 -->
		<!-- <view class="bottom-nav">
			<view class="nav-item">
				<image src="/static/car-icon.png" mode="scaleToFill"></image>
			</view>
			<view class="nav-item">
				<image src="/static/grid-icon.png" mode="scaleToFill"></image>
			</view>
			<view class="nav-item">
				<image src="/static/info-icon.png" mode="scaleToFill"></image>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			fh() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		background-image: url('/static/home/BG.png');
		min-height: 100vh;
		// display: flex;
		// position: relative;
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
	}

	/* 顶部栏 */
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 40rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.user-info {
		font-size: 32rpx;
		font-weight: bold;
	}

	.time {
		font-size: 32rpx;
	}

	.status-icons {
		display: flex;
	}

	.status-icons text {
		margin-left: 10rpx;
	}

	/* 车辆图片 */
	.car-image {
		width: 1900rpx;
		height: 800rpx;
		position: absolute;
		top: 620rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	/* 通用卡片样式 */
	.card {
		// background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		padding: 20rpx;
		// margin: 50rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
		position: absolute;
		font-size: 50rpx;
	}

	.fh {
		top: 100rpx;
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.3);
		margin: 20rpx;
		border-radius: 100%;
		font-size: 30rpx;
		color: white;
		font-weight: 800;
		margin-right: 200rpx;
	}

	.card-title {
		font-size: 80rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.card-content1 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
	}

	.card-content {
		display: flex;
		flex-direction: column;
		padding: 0rpx 50rpx;

	}

	.row1 {
		display: flex;
		justify-content: space-between;
		margin: 0rpx 30rpx;
		flex-wrap: wrap;
		font-size: 40rpx;
		width: 45%;

		text {
			margin: 10rpx;

		}
	}

	.row {
		display: flex;

		justify-content: space-between;
		margin-bottom: 8rpx;
		font-size: 40rpx;

		text {
			margin: 10rpx;
		}
	}

	/* 车身信息卡片 - 定位 */
	.body-info {
		top: 120rpx;
		left: 400rpx;
		right: 40rpx;
		width: 50%;
	}

	/* 车轮/制动信息卡片 - 定位 */
	.wheel-brake-info {
		top: 120rpx;
		right: 650rpx;
		width: 20%;
		height: 450rpx;
	}

	/* 底盘/转向信息卡片 - 定位 */
	.chassis-steering-info {
		right: 40rpx;
		top: 350rpx;
		width: 550rpx;

	}

	/* 基本信息卡片 - 定位 */
	.basic-info {
		top: 550rpx;
		left: 80rpx;
		width: 600rpx;
	}

	/* 电动机信息卡片 - 定位 */
	.motor-info {
		top: 1000rpx;
		left: 80rpx;
		width: 600rpx;
	}

	/* 胎压监测卡片 - 定位 */
	.tire-pressure-info {
		right: 40rpx;
		top: 880rpx;
		width: 550rpx;
	}

	/* 电池信息卡片 - 定位 */
	.battery-info {
		top: 1370rpx;
		left: 80rpx;
		width: 600rpx;
	}

	/* 里程和电量区 - 定位 */
	.mileage-battery {
		position: absolute;
		bottom: 280rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
	}

	.mileage {
		font-size: 80rpx;
		margin: 20rpx;
		color: #a1a1a1;

	}

	.range {
		font-size: 80rpx;
		margin: 20rpx;
		display: inline-block;
		margin: 20rpx;
	}

	.progress {
		height: 20rpx;
		background-color: #ddd;
		border-radius: 5rpx;
		margin: 10rpx 0;
		width: 1200rpx;
	}

	.mileage-bottom {
		display: flex;
		justify-content: space-evenly;
		align-items: center;

	}

	.progress-bar {
		height: 100%;
		background-color: #00ccff;
		border-radius: 5rpx;
	}

	.progress-text {
		font-size: 24rpx;
	}

	/* 仪表盘 - 定位 */
	.dashboards {
		position: absolute;
		bottom: 180rpx;
		right: 40rpx;
		display: flex;
	}

	.dashboard {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #fff;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 底部导航 - 定位 */
	.bottom-nav {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-around;
		width: 400rpx;
	}

	.nav-item image {
		width: 40rpx;
		height: 40rpx;
	}
</style>